<template>
    <div class="myBookMain">
        <div class="myBookInfo">
            <div class="tit">我的书券</div>
            <router-link to="cardrecord"><div class="recordsTit">消费记录</div></router-link>
            <div class="cardNum">{{cardNum}} 张</div>
            <div class="useCard"><div @click="jumpUseCard">我要使用书券</div>
                <router-link to="buyhelp"><div class="help"></div></router-link>
            </div>
        </div>
        <div class="couponList">
            <div class="couponBox clearfix">
                <div class="couponTit" >5元 <span>(1张书券)</span></div>
                <div class="buy" @click="orderDetails(5)">购买</div>
            </div>

            <div class="couponBox clearfix">
                <div class="couponTit" >10元 <span>(3张书券)</span></div>
                <div class="buy" @click="orderDetails(10)">购买</div>
            </div>

            <div class="couponBox clearfix recommend">
                <div class="couponTit">15元 <span>(10张书券)</span></div>
                <div class="buy" @click="orderDetails(15)">购买</div>
            </div>
        </div>
        <div class="QAList">
            <div class="QATit"></div>
            <div class="QABox">
                <div class="QLine">什么是“书券”？</div>
                <div class="ALine">“书券”是快乐读书吧中用于兑换电子书的凭证。一张“书券”可以兑换一本电子书。</div>
            </div>
            <div class="QABox">
                <div class="QLine">书券有效期是多久？</div>
                <div class="ALine">“书券”没有有效期，用户的“书券”一旦购买后，在未进行兑换之前，均可以在快乐读书吧中正常使用。</div>
            </div>
            <div class="QABox">
                <div class="QLine">电子书有效期是多久？</div>
                <div class="ALine">“电子书”没有有效期，用户一旦使用“书券”兑换“电子书”之后，终生有效，用户可以随时在快乐读书吧中查看这本电子书。</div>
            </div>
            <div class="QABox">
                <div class="QLine">客服信息？</div>
                <div class="ALine">客服热线：0571-89935017<br>微信客服：klxt91118</div>
            </div>
        </div>
        <div class="mask" v-show="isShowOrder||isResult" @click="clearAll"></div>
        <transition name="slideup">
            <div class="orderDetailBox" v-show="isShowOrder">
                <div class="orderTIt">您正在购买一张书券</div>
                <div class="orderPrice">实付:<span>￥</span><span class="num">{{orderPrice}}</span></div>
                <div class="wxPay">微信支付</div>
                <div class="close"></div>
            </div>
        </transition>

        <transition name='fade'>
            <div class="resultBox" v-show="isResult">
                <div class="resultSuccess" v-if="isPaySuccess">
                    支付成功
                </div>
                <div class="resultError" v-if="!isPaySuccess">
                    支付失败
                </div>
                <div class="resultMsg" >
                    <template v-if="isPaySuccess">
                     {{number}}张书券已经成功加入您的账户
                    </template>
                    <template v-else>
                      支付失败，请返回重试
                    </template>
                    </div>
                <div class="confirm"  @click="isResult = false">确定</div>
            </div>
        </transition>

    </div>
</template>

<script>
import { alertMask,_getParames,getParames} from '@/assets/js/base'
import { axGet } from '@/api/index'
export default {
    data(){
        return{
            cardNum:0,
            orderPrice:0,
            user:this.$parent.myInfo,
            isShowOrder:false,
            isResult:false,
            isPaySuccess:true,
            number:0,//购买的数量
            //公众号
            codeId:getParames('code') ? getParames('code') : _getParames('code'),
            openid: window.sessionStorage.getItem('openid'),
            // openid:'oaDH_jnGETj3h_2uxEMyDYjr5IdQ',  //我测试用的
            // codeId:'0219iGz80qVQAC1YJ0y80DhGz809iGzV',  //我测试用的
        }
    },
    created(){
        this.$parent.menuShow=false;
        this.getMyCard();
        // let scope='https://open.weixin.qq.com/connect/oauth2/authorize?appid='+this.appId+'&redirect_uri='+escape(this.url)+'&response_type=code&scope=snsapi_base&state=1#wechat_redirect'
        // console.log(scope)
    },
    mounted(){

    },
    methods:{
        async getMyCard(){
            let res = await axGet('GetMyVoucher', {userId:this.user.UserId,})
            this.cardNum = res.Value;
            console.log(res,"res我的书券")
        },
        async orderDetails(price){
            
            if(this.codeId){
                if(price === 5){
                    this.number = 1
                }else if(price === 10){
                    this.number =3
                }else if(price === 15){
                    this.number =10
                }
                let res = await this.CreatOrder(price);
                if(res.ResultCode==1){
                    this.goPay(res.Value)
                    this.orderPrice = price;
                    this.isShowOrder = true;
                }else{
                    console.log("订单生成失败")
                }
            }else{
                this.$router.push({'path':'howbuy'})
            }
        },
        jumpUseCard(){
            this.$router.push('/library')
        },
        // 创建微信订单
        async CreatOrder(price){
            let res = await axGet('CreatVoucherWxOrder', {openid:this.openid,price:price,userId:this.user.UserId})
            console.log(res,"订单res")
            return res
            
        },
        clearAll(){
            this.isShowOrder = false;
            this.isResult = false;
            this.isPaySuccess =false
        },
        goPay(data){
            let that=this;
            // let prepayId=await this.getPrepay();//拿到订单
             /***** 调用微信支付 *****/ 
             console.log(WeixinJSBridge)
            if (typeof WeixinJSBridge == "undefined"){
                if( document.addEventListener ){
                    document.addEventListener('WeixinJSBridgeReady',  that.wxPay(data), false);
                }else if (document.attachEvent){
                    document.attachEvent('WeixinJSBridgeReady',  that.wxPay(data)); 
                    document.attachEvent('onWeixinJSBridgeReady',  that.wxPay(data));
                }
            }else{
                that.wxPay(data)
            } 
        },
        //调用微信支付
        wxPay(data){
            let that=this;
            WeixinJSBridge.invoke('getBrandWCPayRequest', {
                "appId": data.appId, //公众号名称，由商户传入 
                "timeStamp": data.timeStamp, //时间戳   
                "nonceStr": data.nonceStr, //随机字符串     
                "package": data.package, //订单
                "signType": data.signType, //微信签名方式    
                "paySign": data.paySign //微信签名 
            },function(res){
                that.isResult =true
                if(res.err_msg == "get_brand_wcpay_request:ok" ){
                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    // WeixinJSBridge.call('closeWindow') //返回公众号
                    // that.$router.push({'path':'buybook'})
                    that.getMyCard();
                    // that.clearAll();
                    that.isShowOrder =false
                    that.isPaySuccess =true
                    // 再跳出结果页
                }else{
                    // that.clearAll();
                    that.isShowOrder =false
                    that.isPaySuccess =false
                }
            }); 
        },
    }
}
</script>

<style lang="scss" scoped>
.myBookMain{
    width: 100%;
}
.myBookInfo{
    width: 6.86rem;
    height: 3.4rem;
    background: url(~@/assets/img/main/book-headbg.png) no-repeat;
    background-size: 100% 100%;
    margin: .4rem auto;
    border-radius: .4rem;
    box-shadow: .1rem .1rem .2rem rgba($color: #02affe, $alpha: .3);
    position: relative;
    .tit{
        font-size: .4rem;
        color: #FFF; 
        position: absolute;
        top: .3rem;
        left: .5rem;
    }
    .recordsTit{
        font-size: .3rem;
        color: #FFF;
        position: absolute;
        top: .35rem;
        right: .35rem;
    }
    .cardNum{
        font-size: .6rem;
        line-height: .6rem;
        color: #FFF;
        width: 100%;
        position: absolute;
        top: 1.3rem;
        text-align: center;
    }
    .useCard{
        width: 2.6rem;
        height: .64rem;
        background: #FFF;
        border-radius: .32rem;
        font-size: .32rem;
        line-height: .64rem;
        color: #02affe;
        text-align: center;
        position: absolute;
        top: 2.25rem;
        left: 2.13rem;
        .help{
            position: absolute;
            height: .64rem;
            width: .64rem;
            border-radius: .32rem;
            right: -.8rem;
            top: 0;
            background: url(~@/assets/img/main/dot-question.png) #FFF no-repeat center;
            background-size: 30% auto;
        }
    }
}
.couponList{
    .couponBox{
        width: 6.86rem;
        height: 1.2rem;
        border-radius: .6rem;
        background: #f3f5f7;
        margin: .15rem auto .05rem;
        padding: 0 .35rem;
        position: relative;
        box-sizing: border-box;
        &.recommend{
            background: #fff6cc;
            .couponTit{
                color: #ff7100;
            }
            .buy{
                background: #ffd300;
                color: #844e13;
            }
        }
        .couponTit{
            padding-left: .3rem;
            line-height: 1.2rem;
            font-size: .4rem;
            font-weight: bold;
            color: #333;
            span{
                margin-left: .2rem;
                font-size: .3rem; 
                font-weight: normal;
            }
        }
        .buy{
            width: 1.6rem;
            height: .7rem;
            background: #02affe;
            border-radius: .35rem;
            position: absolute;
            top: .25rem;
            right: .35rem;
            font-size: .3rem;
            text-align: center;
            line-height: .7rem;
            color: #FFF;
            font-weight: bold;
        }
    }
    .couponBox.recommend::after{
        content: '推荐';
        background: url(~@/assets/img/main/recommend-bg.png) no-repeat;
        background-size: 100% 100%;
        width: .9rem;
        height: .48rem;
        position: absolute;
        top: -.15rem;
        left: .1rem;
        font-size: .26rem;
        color: #FFF;
        text-align: center;
        line-height: .48rem;
    }
}
.QAList{
    width: 6.86rem;
    box-sizing: border-box;
    padding: .35rem;
    border-radius: .4rem;
    margin: .4rem auto;
    box-shadow: 0 0 .4rem rgba($color: #3b64a8, $alpha: .15);
    .QATit{
        width: 100%;
        height: 1.3rem;
        margin-bottom: .2rem;
        background: url(~@/assets/img/main/QaA-tit.png) no-repeat center;
        background-size: 50% auto;
    }
    .QABox{
        line-height: .6rem;
        margin-bottom: .4rem;
        .QLine{
            padding-left: .6rem;
            background: url(~@/assets/img/main/dot-Q.png) no-repeat left;
            background-size: .44rem .44rem;
            font-size: .3rem;
            color: #333;
            font-weight: bold;
        }
        .ALine{
            padding-left: .6rem;
            background: url(~@/assets/img/main/dot-A.png) no-repeat left .1rem;
            background-size: .44rem .44rem;
            font-size: .3rem;
            color: #666;
        }
    }
}
.orderDetailBox{
    width: 100%;
    height: 3rem;
    border-radius: .4rem .4rem 0 0;
    background: #FFF;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2001;
    padding: .6rem .3rem .4rem .3rem;
    box-sizing: border-box;
    .orderTIt{
        font-size: .3rem;
        color: #666;
    }
    .orderPrice{
        font-size: .32rem;
        color: #666;
        margin-top: .7rem;
        span{
            color: #ff7b12;
        }
        .num{
            font-size: .56rem;
            font-weight: bold;
        }
    }
    .wxPay{
        width: 3.8rem;
        height: 1rem;
        border-radius: .5rem;
        background: #02affe;
        font-size: .4rem;
        line-height: 1rem;
        text-align: center;
        color: #FFF;
        font-weight: bold;
        position: absolute;
        bottom: .5rem;
        right: .3rem;
    }
}
.resultBox{
    width: 6.25rem;
    background: #FFF;
    padding: .6rem .3rem;
    border-radius: .4rem;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2001;
    .confirm{
        width: 3.2rem;
        height: .8rem;
        border-radius: .4rem;
        background: #02affe;
        font-size: .32rem;
        color: #FFF;
        line-height: .8rem;
        text-align: center;
        margin: 0 auto;
    }
    .resultMsg{
        font-size: .28rem;
        color: #666;
        margin: .4rem auto;
        text-align: center;
    }
    .resultSuccess{
        background: url(~@/assets/img/main/dot-gou.png) no-repeat top center;
        background-size: 1.1rem auto;
        height: 1.8rem;
        padding-top: 1.4rem;
        text-align: center;
        font-size: .36rem;
        line-height: .4rem;
        font-weight: bold;
        color: #02affe;
        box-sizing: border-box;
    }
    .resultError{
        text-align: center;
        font-size: .36rem;
        line-height: .4rem;
        font-weight: bold;
        color: #333;
    }
}
</style>